<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>开单确认</text>
			</view>
		</view>
		<view :style="{marginTop:(49+top)+'px'}">
			<tui-list-cell :lineLeft="false">
				<view class="tui-item-box">
					<view class="tui-msg-box">
						<image :src="mem.avatar" class="tui-msg-pic" mode="widthFix"></image>
						<view class="tui-msg-item">
							<view class="tui-msg-name">
							{{mem.username}}<text style="font-size: 14px;padding-left: 10px;">({{mem.mobile}})</text>
							<image v-if="mem.group_id >0" :src="tui.website+'/static/images/icon/lv'+mem.group_id+'.png'" mode="widthFix" style="width: 30px;vertical-align: bottom;"></image>
							<text v-if="mem.agent >-1" style="font-size: 10px;color: #ffde34;padding: 3px 5px;border-radius: 5px; background-color: #333333;display: inline-block;">{{mem.agent_name}}</text>
							</view>
							<view class="tui-msg-content">会员编码：{{mem.UN}} <text style="padding-left: 20px;">余额：</text><text style="color: #FF0000;font-weight: 700;">￥{{mem.money}}</text></view>
						</view>
					</view>
				</view>
			</tui-list-cell>
		</view>
		<view class="mycard">
			<view class="" style="padding: 20upx 0 0 30upx;font-weight: 700;font-size: 30upx;">
				消费清单
			</view>
			<view class="tui-cart-cell" v-for="(item,index) in dataList" :key="index">
						<view class="tui-goods-item">
							<view class="del" @click="del(index,item.id)">
								&times;
							</view>
							<image :src="item.img" class="tui-goods-img"  mode="aspectFill"/>
							<view class="tui-goods-info">
								<view class="tui-goods-title">
									{{item.name}}
								</view>
								<view class="tui-goods-model" @click="chooseUserAuthCard(index,item.id)">
									<view class="tui-model-text" v-if="item.card">{{item.card_name}}</view>
									<view class="tui-model-text" v-else>请选择权益卡</view>
									<tui-icon name="arrowdown" :size="16" color="#333"></tui-icon>
								</view>
								<view class="tui-price-box">
									<view class="tui-goods-price"><text style="color: #000000;" v-if="mem.agent>-1">代理价</text>
									￥{{item.dis_price}}
									<text style="color: #aaa;text-decoration:line-through;padding-left: 5px;">￥{{item.price}}</text>
									 </view>
									<tui-numberbox :value="item.buyNum" :height="36" :width="80" :min="1" :max="100000" :index="index" @change="changeNum"></tui-numberbox>
								</view>
								<view style="text-align: right;width: 100%;">
									<view class="tui-goods-price"><text style="color: #000000;">小计：</text>￥{{item.money}}</view>
								</view>
							</view>
						</view>
			</view>
			<view style="text-align: right;padding-bottom: 20upx;padding-right: 30upx;font-size: 28upx;">
				<!-- 小计: <text style="color: #FF0000;">￥{{total_money}}</text> -->
				 <!-- <text style="text-decoration: line-through;color:#bbb;padding-left: 20upx;">￥{{oldTotalMoney}}</text> -->
				 </view>
		</view>
		<view class="mycard">
			<tui-list-cell @click="getLeaderList()" :arrow="true">
				<view class="tui-item-box">
					<text class="tui-list-cell_name">销售员工</text>
					<view class="tui-right">{{leader.nickname}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" :unlined="true">
				<view class="tui-item-box" style="height: 30px;">
					<text class="tui-list-cell_name">补录订单</text>
					<view v-show="repOrderStatus" @click="showCalendarStatus" class="rep-order-date"><tui-icon margin="0 10px 0 0" name="calendar" :size="16"></tui-icon>{{dateString?dateString:'选择日期'}}</view>
					<view class="tui-right"><switch @change="changeRepStatus" style="zoom:0.6" color="#E41F19"/></view>
				</view>
			</tui-list-cell>
			<view class="rep-order-tip" v-show="repOrderStatus">
				<text>1.用于补开历史订单,补单后该笔订单的收将计入补录选择的时间。</text>
				<text>2.上月的订单必须在本月3号24点之前补录完成。</text>
			</view>
		</view>
		<!--tabbar-->
		<view class="tui-tabbar">
			<view class="tui-checkAll">
				<view style="width: 100%;color: #666;font-size: 14px;"><tui-icon name="cart" :size="19"></tui-icon>( {{dataList.length}}种商品，共{{buyNum}}件)</view>
				<view style="width: 100%;" class="tui-total-price" >共计:
					<text style="font-size: 10px;color: #FF0000;padding-left: 8px;">￥</text>
					<text class="tui-bold">{{total_money}}</text>
					<text class="line-text">￥{{oldTotalMoney}}</text>
				</view>
			</view>
			<view>
				<tui-button width="200rpx" height="80rpx" :size="30" type="danger" shape="circle"  @click="btnPay">收款</tui-button>
			</view>
		</view>
		<!-- 选择员工 -->
		<tui-bottom-popup :show="showLeaderStatus" :zIndex="9997" :radius="false" @close="hideLeader">
			<view class="leader-box">
				<view
					class="leader-txt"
					:class="[item.id == leader.id?'active':'']"
					v-for="(item, index) in LeaderLists"
					:key="index"
					:data-index="index"
					@tap.stop="chooseLeader(index)"
				>{{ item.nickname }}</view>
			</view>
		</tui-bottom-popup>
		<tui-bottom-popup :class="'userAuthCardWin'" :show="showUserAuthCard" :zIndex="9997" :radius="false" @close="hideUserAuthCard">
			<view class="userAuthCard-list-box">
				<view class="userAuthCard-title">
					请选择会员权益
				</view>
				<view class="" style="max-height: 200px;overflow-y: scroll;">
					<view
					class="userauth"
					v-for="(item, index) in userAuthCard"
					:key="index"
					:data-index="index"
					@tap.stop="chooseAuthCard(index,item.log_id,item.dis,item.type)"
				>{{ item.name }} <text v-if="item.desc">({{item.desc}})</text></view>
				<view
					class="userauth"
					@tap.stop="chooseAuthCard(-1,0,100,0)"
				>不使用任何权益卡</view>
				</view>
				
			</view>
		</tui-bottom-popup>
		<tui-datetime :type="2" ref="dateTime" @confirm="changeDate"></tui-datetime>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid:0,//客户id组
				gids:'',//购物id组
				mem:{},//客户信息
				top:0,//顶部padding的高
				dis:1,//折扣
				oldTotalMoney:0,
				buyNum:1,
				leader:{
					nickname:'晓雪',
					id:4
				},
				LeaderLists:[],
				showLeaderStatus:false,
				repOrderStatus:false,
				dateString:"",
				dataList: [],
				curr_data_index:0,
				actions: [
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
				card_id:0,
				showUserAuthCard:false,
				userAuthCard:[],
				userCardLists:[],
				total_money:0.00
			}
		},
		onLoad(opt) {
			this.mid = opt.mid;
			this.gids = opt.gids;
			this.param = opt.param;
			if(opt.card){
				this.card_id = opt.card;
			}
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow() {
			this.getMemberInfo();
			this.myinfo();
			this.getUseCardLists();
		},
		computed:{
			// total_money(){
			// 	return (this.oldTotalMoney *this.dis).toFixed(2);
			// }
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			addtoCart(){
					let gids=[];
					this.dataList.map(item=>{
						gids.push({id:item.id,num:item.buyNum})
					});
					uni.setStorageSync('cart',gids);
			},
			del(index,id){
				this.dataList.splice(index,1);
				this.calcHandle()
				this.addtoCart()
			},
			myinfo(){
				this.tui.get('user/api/getuser').then(res=>{
					this.leader = res.data;
				})
			},getMemberInfo(){
				this.tui.get('user/api/getMem',{id:this.mid}).then(res=>{
					this.mem = res.data;
					this.dis = this.mem.dis;
				})
			},
			getUserAuthCard(gid){
				this.tui.get('user/card/lists',{mid:this.mid,gid:gid}).then(res=>{
					this.userAuthCard = res.data;
				})
			},getUseCardLists(){
				this.tui.get('user/card/lists',{mid:this.mid}).then(res=>{
					this.userCardLists = res.data;
					// console.log(this.userCardLists);
					this.getGoods();
				})
			},
			hideUserAuthCard(){
				this.showUserAuthCard = false;
			},
			chooseAuthCard(index,id,dis,card_type){
				console.log(card_type);
				this.showUserAuthCard = false;
				// dataList
				let item = this.dataList[this.curr_data_index];
				item.card = id;
				if(index <0){
					item.card_name='';
					item.dis = 100;
					item.card_type = 0;
				}else{
					item.card_name= this.userAuthCard[index].name;
					item.dis = dis;
					item.card_type = card_type;
				}
				this.$set(this.dataList,this.curr_data_index,item);
				console.log(this.dataList);
				setTimeout(() => {
					this.calcHandle()
				}, 200)
			},
			chooseUserAuthCard(ind,gid){
				this.showUserAuthCard =true;
				this.curr_data_index=ind;
				this.getUserAuthCard(gid);
				// console.log(this.curr_data_index);
			},
			getGoods(){
				this.tui.get('user/api/billinggoods',{gids:this.param,card:this.card_id,mid:this.mid}).then(res=>{
					this.dataList = res.data;
					this.buyNum = this.dataList.length;
					this.calcHandle();
				})
			},
			calcHandle() {
				let buyNum = 0;
				let totalPrice = 0;
				let total_money = 0;
				this.userCardLists.map(mem=>{
					mem.fee= mem.money;
				})
				// console.log(this.userCardLists);
				// console.log(this.dataList);
				this.dataList.map((item) => {
					buyNum += (item.buyNum?item.buyNum:1);
					let dis = item.dis?item.dis:100;
					let item_money = parseFloat(item.price) * (item.buyNum?item.buyNum:1)
					totalPrice += item_money;
					// console.log(item.card_type);
					//单独统计每个的小计
						// 如果使用套餐卡的
						if(item.card_type == 3){//
						item.dis_price = item.price
							this.userCardLists.map(mem=>{
								if(mem.log_id == item.card){
									// console.log(item_money,mem.fee);
									if(mem.fee > item_money){
										mem.fee = mem.fee - item_money;//从卡里扣除
										item_money = 0;
									}else{
										// console.log(item_money);
										item_money -= mem.fee;
										mem.fee =0;
									}
									// console.log(mem);
								}
							})
						}
						//如果使用会员卡
						if(item.card_type == 1){//
							item_money = item.vip_price*item.buyNum;
							item.dis_price = item.vip_price
						}
						if(item.card_type == 0 || !item.card_type){//啥都不用
							item_money = item_money ;
							item.dis_price = item.price 
						}
						//如果使用次卡，只能一单使用一次
						if(item.card_type == 2){//todo
						item.dis_price = item.price
							this.userCardLists.map(mem=>{
								if(mem.log_id == item.card){
									// console.log(mem);
									//如果再次数内 免费
									if(mem.nums>= item.buyNum){
										item_money =0
									}else{
										let sy = item.buyNum -mem.nums;
										item_money = item.price *sy;
									}
									//如果在次数外 单价*多余数量
								}
							})
						}
					//累计小计成共计
					// item.money =0;
					item.money = item_money
					total_money +=item_money;
				})
				this.buyNum = buyNum
				this.oldTotalMoney = totalPrice.toFixed(2)
				this.total_money = total_money.toFixed(2)
				// console.log(this.dataList);
				let dataList = this.dataList;
				let it = this;
				setTimeout(function() {
					it.dataList = dataList;
				}, 200);
				
			},
			changeNum: function(e) {
				// this.dataList[e.index].buyNum = e.value
				this.$set(this.dataList[e.index],'buyNum',e.value)
				setTimeout(() => {
					this.calcHandle();
					this.addtoCart()
				}, 100)
			},
			getLeaderList(){
				this.tui.get('user/api/listleader').then(res=>{
					this.LeaderLists = res.data;
					this.showLeaderStatus = true;
				})
			},
			hideLeader(){
				this.showLeaderStatus = false;
			},chooseLeader(idx){
				this.leader = this.LeaderLists[idx];
				this.showLeaderStatus =false;
			}
			,changeRepStatus(e){
				this.repOrderStatus = e.detail.value ;
			},
			showCalendarStatus(){
				this.$refs.dateTime.show();
			},
			changeDate(val){
				this.dateString = val.result;
			},btnPay(){
				let num=[];
				let gids=[];
				let card=[];
				let day=this.repOrderStatus?this.dateString:0;
				this.dataList.map((item) => {
					num.push(item.buyNum?item.buyNum:1);
					gids.push(item.id);
					card.push(item.card?item.card:0);
				});
				
				let params={
					mid:this.mid,
					leader:this.leader.id,
					gids:gids.join(','),
					num:num.join(','),
					card:card.join(','),
					day:day,
					type:0
				};
				// console.log(params);
				// return;
				this.tui.post('user/api/intoorder',params).then(res=>{
					if(res.code){
						uni.navigateTo({
							url:'../confirm/confirm?osn='+res.data
						})
					}else{
						uni.showModal({
							title:"提醒",
							content:res.msg,
						})
					}
				})
			}
		}
	}
</script>

<style>
.container {
		padding-bottom: 120rpx;
	}
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
/**/
	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		border-bottom: #DDDDDD dashed 1px;
	}
	.tui-goods-item .del{
		position: absolute;
		color: #FFF;
		font-size: 12px;
		background-color: rgba(0,0,0,0.44);
		z-index: 99999;
		right: 0;
		top: -15px;
		border-radius: 30px;
		width: 15px;
		height: 15px;
		padding: 0;
		text-align: center;
		line-height: 15px;
	}
	.tui-goods-img {
		width: 180rpx;
		height: 180rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
	
	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}
	
	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}
	
	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	.tui-goods-price {
		font-size: 24rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}
	
	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}
	
	.tui-buy {
		display: flex;
		align-items: center
	}
	
	.tui-bold {
		font-weight: bold;
	}
	
	.tui-sub-info {
		max-width: 532rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		color: #333;
		transform: scale(0.8);
		transform-origin: 100% center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: auto
	}
	
	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}
	
	.tui-gray {
		color: #B2B2B2 !important;
	}
	
	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}
	
	.tui-flex-center {
		align-items: center !important;
	}
	
	.tui-invalid-ptop {
		padding-top: 40rpx;
	}
	
	.tui-tabbar {
		width: 100%;
		height: 130rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 999;
	}
	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-checkAll {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tui-checkbox-pl {
		padding-left: 12rpx;
	}
	.tui-total-price {
		font-size: 32rpx !important;
		padding-top: 10px;
		color: #999999;
	}
	.tui-total-price>.tui-bold{color: #FF0000;}
	.tui-total-price>.line-text{color: #999;text-decoration: line-through;padding-left: 10px;font-size: 13px;}
	.tui-price-box >>> .tui-numbox-icon{
		border-radius: 25px;
		border:2px solid #FF0000;
		color: #FF0000 !important;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}.tui-price-box >>> .tui-numbox-icon.tui-disabled{
		border-radius: 25px;
		border:2px solid #EEEEEE;
		color: #EEEEEE !important;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}
	.tui-price-box >>> .tui-numbox-icon.tui-icon-plus{
		border-radius: 25px;
		border:2px solid #FF0000;
		color: #FFF !important;
		background-color: #FF0000;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}
	.tui-price-box >>> .tui-num-input{
		margin: 0;
	}
	/*销售员工*/
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.tui-list-cell_name{font-size: 32upx;}
	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
	.leader-box{
		padding: 30upx;
		min-height: 260upx;
	}
	.leader-txt{
		padding: 10upx 20upx;
		margin: 20upx;
		background: #FFF;
		border-radius: 10upx;
		border: 1px solid #333;
		color: #333;
		float: left;
		display: block;
		font-size: 12px;
	}
	.leader-txt.active{
		background-color: #333;
		color: #FFF;
	}
	/**
	 * 补单
	 */
	.rep-order-date{
		margin-left: auto;
		border:1px solid #EEE;
		background-color: #f8f8f8;
		padding: 8upx 20upx;
		min-width: 200upx;
		border-radius: 5px;
	}
	.rep-order-tip{
		padding: 30upx;
		color: #999;
	}
	.rep-order-tip>text{display: inline-block;margin-bottom: 20upx;font-size: 28upx;}
	.userAuthCardWin{
		border-top-left-radius: 10px;border-top-right-radius: 10px;
		overflow: hidden;
	}
	 >>>.userAuthCardWin view.tui-bottom-popup{
		border-top-left-radius: 10px;border-top-right-radius: 10px;
		overflow: hidden;
	}
	.userAuthCard-list-box{
		min-height: 200px;border-top-left-radius: 10px;border-top-right-radius: 10px;
		overflow: hidden;
	}
	.userAuthCard-list-box .userAuthCard-title{
		padding: 15px;
		font-size: 16px;
		font-weight: 700;
		border-top-left-radius: 10px;border-top-right-radius: 10px;
		border-bottom: 1px solid #EEEEEE;
	}
	.userauth{
		padding: 10px 30px;
		font-size: 12px;
	}
</style>
